<template>
  <div style="background-color: #000;">
    <section>
      <div class="container">
        <!-- 面包屑导航star -->
        <el-breadcrumb separator="/" class="breadCrumb_Box">
          <el-breadcrumb-item :to="{ path: '/detailInfoto' }">个人中心</el-breadcrumb-item>
          <el-breadcrumb-item>我的资料</el-breadcrumb-item>
          <el-breadcrumb-item>{{c_breadCrumb_name}}</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 面包屑导航end -->
        <el-row class="content">
          <el-col class="nav" :xs="24" :sm="24" :md="24" :lg="4" :xl="4">
            <accountMenu @handleClick="handleClick"></accountMenu>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="20" :xl="20"
            style="background-color: #0f0f0f; min-height: 70vh; border-left: 1px solid #272727;">
            <div v-if="active==0">
              <detailInfo></detailInfo>
            </div>
            <div v-if="active==1">
              <orderlist></orderlist>
            </div>
            <div v-if="active==2">
              <agency></agency>
            </div>
            <div v-if="active==3">
              <information></information>
            </div>
          </el-col>
        </el-row>
      </div>
    </section>
  </div>
</template>

<script>
  import accountMenu from "@/components/account/accountMenu";
  import detailInfo from "@/components/account/detailInfo";
  import orderlist from "@/components/account/orderlist";
  import agency from "@/components/account/agency";
  import information from "@/components/account/information";
  export default {
    components: {
      detailInfo,
      orderlist,
      agency,
      accountMenu,
      information
    },
    data() {
      return {
        userSrc: '../../../static/realName/userico.png', //我的资料图标
        orderSrc: '../../../static/realName/orderico.png', //我的订单图标
        // 默认显示first页面
        c_breadCrumb_name: "应用列表",
        // 记录当前tab页
        active: 3,
      };
    },
    created() {
      // 判断面包屑导航的显示内容

      if (sessionStorage.getItem('acount_detailInfo') != null) {
        this.active = sessionStorage.getItem('acount_detailInfo')
        console.log(this.active);
        if (this.active == 0) {
          this.c_breadCrumb_name = "账号信息";
        }
        if (this.active == 1) {
          this.c_breadCrumb_name = "我的订单";
        }
        if (this.active == 2) {
          this.c_breadCrumb_name = "我的代理";
        }
        if (this.active == 3) {
          this.c_breadCrumb_name = "消息";
        }
      }
      console.log(this.$route.name);
      if (this.$route.name == 'agency') {
        this.active = 2
      }
      if (this.$route.name == 'information') {
        this.active = 3
      }
      var token_time = sessionStorage["token_time"];
      token_time = parseInt(token_time);
      token_time = token_time + 3600000;
      var now = new Date().getTime();
      if (token_time < now || token_time == undefined || isNaN(token_time)) {
        console.log("未登录"); //跳转到登录;
        sessionStorage.setItem("currentTab_title", "");
        this.$router.push({
          path: "/login",
          name: "login",
        });
        return;
      }
    },
    mounted() {

    },
    beforeRouteLeave(to, from, next) {
      // 在离开此路由之后清除保存的状态（我的需求是只需要在当前tab页操作刷新保存状态，路由切换之后不需要保存）
      // 根据个人需求决定清除的时间
      sessionStorage.removeItem("acount_detailInfo");
      next();
    },
    methods: {
      // 选择侧边导航栏
      handleClick(index) {
        this.active = index
        if (this.active == 0) {
          this.c_breadCrumb_name = "账号信息";
        }
        if (this.active == 1) {
          this.c_breadCrumb_name = "我的订单";
        }
        if (this.active == 2) {
          this.c_breadCrumb_name = "我的代理";
        }
        if (this.active == 3) {
          this.c_breadCrumb_name = "消息";
        }
      }
    },
  };

</script>
<style scoped>
  .breadCrumb_Box {
    margin-top: 30px;
  }

  .content {
    width: 100%;
    height: 100%;
    margin: 20px 0px 30px 0px;
    background-color: #0f0f0f;
    box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
  }

  div>>>.nav {
    display: inline-block;
    background-color: #0f0f0f;
  }

  .breadCrumb_Box>>>.el-breadcrumb__item .is-link.el-breadcrumb__inner {
    color: #ee7829;
  }

  .breadCrumb_Box>>>.el-breadcrumb__item .el-breadcrumb__inner {
    color: #fff;
  }

</style>
